<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>基于amazeui框架头像上传代码</title>

 <link rel="stylesheet" href="/asset/layui/css/layui.css">
 <script src="/asset/layui/layui.js"></script>
 <link rel="stylesheet" href="/asset/cropper/cropper.min.css">
<style>
	.up-form{
		margin: 10px;
		border: 1px solid #000;
		height: 450px;
		width: 725px; 
	}
	
	.up-form .up-pre{
	 
	 width: 540px; 
	 height: 320px;
	 margin:auto;
	 margin-top: 20px;
	}
	.up-form .up-before{
	
		width: 325px; 
		height: 325px;
		float: left;
		background: #fcfcfc;
		border: 1px solid #e3e3e3;
	}
	.up-form .up-before img {
	    width: 100%;
	}
	.up-form .up-after{
		background: #fcfcfc;
	    overflow: hidden;
	    width: 186px;
	    height: 186px;
	    border: 1px solid #e3e3e3;
	    float: left;
	    margin-left: 25px;
	}
	.up-form .up-control-btns{
	 	clear:both;
	    width: 150px;
	    height: 30px;
	    margin-left: auto;
	    margin-right: auto;
	    background: #dddddd;
	    text-align: center;
	    line-height: 30px;
	    margin-top: 30px;
	
	}
	
	.am-fl {
    float: left;
}
	.am-g {
    margin: 0 auto;
    width: 100%;
}
	
	.up-frame-bj .up-frame-radius{border-radius: 5px;}
	.up-frame-parent .up-frame-header{height: 50px;padding: 0px;line-height: 50px;border-bottom:solid 1px #e5e5e5;}
	.up-frame-parent .up-frame-header label{font-size: 16px;float: left;margin-left: 14px;color: #808080;}
	
	.up-frame-parent .up-frame-body{padding:20px;}
	.up-frame-parent .up-pre-before {width:327px;height: 327px;padding:0px;float: left;background: #fcfcfc;border: 1px solid #e3e3e3;}
	.up-frame-parent .up-pre-before img{width: 100%;}
	
	.up-frame-parent .up-frame-body .up-pre-after{background: #fcfcfc;overflow: hidden;width: 186px;height: 186px;border: 1px solid #e3e3e3;float: left;margin-left: 25px;}
	
	.up-frame-parent .up-control-btns{width: 150px;height:30px;margin-left: auto;margin-right: auto;text-align: center;line-height: 30px; margin-top: 30px;cursor: pointer;}
	.up-frame-parent .up-control-btns span{width: 30%;}
    .newcontent{width: 100%;margin: 20px auto;display: flex;justify-content: center;}
    @media screen and (max-width: 600px){
        .up-frame-parent .up-pre-before {width: 100%;}
        .up-frame-parent .up-frame-body .up-pre-after{margin-top: 10px;margin-left: 0px;}
        .newcontent{display: inherit;}
    }
	.ma_left{margin-left: 34px;}


</style>

</head>
<body style="background: #fff;">

<!--图片上传框-->
<div class="up-frame-bj">
  <div class="up-frame-parent up-frame-radius">
	<div class="up-frame-body">
	  <div class="am-g">
		<div class="ma_left"><button type="button" class="layui-btn" id="inputImage"><i class="layui-icon"></i>选择要上传的文件</button>
	  </div>
	  <div class="am-g newcontent" >
		<div class="up-pre-before up-frame-radius">
			<img alt="" src="" id="image" >
		</div>
		<div class="up-pre-after up-frame-radius"></div>
	  </div>
	  <div class="am-g am-fl">
		<div class="up-control-btns">
			<button type="button" class="layui-btn  layui-btn-danger" id="up-btn-ok"><i class="layui-icon">&#xe605;</i>确认提交</button>
		</div>
	  </div>
	  
	</div>
  </div>
</div>
	
	
<script src="/asset/js/jquery-3.3.1.min.js"></script>
<script src="/asset/cropper/cropper.min.js" charset="utf-8"></script>
<script>


layui.use('upload', function(){
  var $ = layui.jquery
  ,upload = layui.upload;
  
  'use strict';
    // 初始化
    var $image = $('#image');
    $image.cropper({
        aspectRatio: '1',
        autoCropArea:0.8,
        preview: '.up-pre-after',
        
    });

 
  
   var URL = window.URL || window.webkitURL;
    ;
  
  //普通图片上传
	  upload.render({
	    elem: '#inputImage'
	    ,url: '/admin/upload/fileupload.htm?module=portrait'
	    ,auto: false
	    ,accept:'images'
	    //,multiple: true
	    ,bindAction: '#up-btn-ok'
	    ,choose: function(obj){
	      	
	      	obj.preview(function(index, file, result){
		     		
		     		if (/^image\/\w+$/.test(file.type)) {
	                    var blobURL = URL.createObjectURL(file);
	                    $image.one('built.cropper', function () {
	                       
	                       URL.revokeObjectURL(blobURL);
	                    }).cropper('reset').cropper('replace', blobURL);
	                    
	                } else {
	                    window.alert('Please choose an image file.');
	                }
		    });
	     
	    }
	    ,before: function(obj){
    			var canvas=$("#image").cropper('getCroppedCanvas');
		 	var data=canvas.toDataURL(); //转成base64
    			
    			this.data.dataURL = data;
		    
		    //var files = obj.pushFile();
		    
		   console.log(this.data);
		  
		    
	    }
	    ,done: function(res){
	     
	     	 if(res.code == 1){
	     		var url = res.data.fileurl;
	     		parent.$('#portraitView').attr('src',url);
	     		parent.$('#portrait').val(url);
	     		parent.layer.close(index);
	     		
	     		var index = parent.layer.getFrameIndex(window.name);
			    parent.layer.close(index);
	     	}else{
	     		layer.msg('上传失败！');
	     	}
	     
	     
	    }
	  });
});

  
  function dataURLtoFile(dataurl, filename) {//将base64转换为文件
        var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
            bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
        while(n--){
            u8arr[n] = bstr.charCodeAt(n);
        }
        return new File([u8arr], filename, {type:mime});
    }

</script>
</body>
</html>
